<template>
  <!-- 筛选产品list -->
  <div class="body">
    <Header @getSearchInfo="getSearchInfo" @SearchBtn="SearchBtn"></Header>
    <div class="ListContent">
      <!-- 筛选部分 -->
      <div>
        <!-- 选择完的条件 -->
        <div class="w" id="J_crumbsBar">
          <div class="crumbs-bar clearfix">
            <div class="crumbs-nav">
              <div class="crumbs-nav-main clearfix">
                <div class="crumbs-nav-item one-level">
                  <div class="crumbs-link">Solution Filter</div>
                  <i class="crumbs-arrow">&gt;</i>
                </div>
                <!-- <div class="crumbs-nav-item">
                  <div class="menu-drop">
                    <div class="trigger">
                      <span class="curr">Mother Project</span>
                      <i class="menu-drop-arrow"></i>
                    </div>
                    <div class="menu-drop-main">
                      <ul class="menu-drop-list">
                        <li v-for="(item, index) in 5" :key="index">
                          <a title>Solution{{ index }}</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <i class="crumbs-arrow">&gt;</i>
                </div>-->

                <!--通过typeList区分 -->
                <div class="filterList">
                  <a
                    class="crumb-select-item"
                    rel="nofollow"
                    v-for="(item, index) in SetFilterList"
                    :key="index"
                  >
                    <b>{{ item.type }}:</b>
                    <em>{{ item.name }}</em>
                    <i @click="delFliter(index)" class="delIcon"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 筛选选择框 -->

        <div id="J_selector" class="selector">
          <div class="J_selectorLine s-category">
            <div class="sl-wrap">
              <div class="sl-key">
                <strong>Solution Map</strong>
              </div>
              <div class="sl-value" v-if="solutionMapList.length>0">
                <div class="sl-v-list">
                  <ul class="J_valueList flex">
                    <div
                      v-for="(item, index) in solutionMapList"
                      :key="index"
                      @click="addtFiltertype(item,'Solution')"
                    >
                      <li v-if="index<6">
                        <a>
                          <i></i>
                          {{ item.name }}
                        </a>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="J_selectorLine s-category">
            <div class="sl-wrap">
              <div class="sl-key">
                <strong>Mother Project</strong>
              </div>
              <div class="sl-value" v-if="MotherProjectList.length>0">
                <div class="sl-v-list">
                  <ul class="J_valueList flex">
                    <div
                      v-for="(item, index) in MotherProjectList"
                      :key="index"
                      @click="addtFiltertype(item,'MotherProject')"
                    >
                      <li v-if="index<6">
                        <a :alt="item.name">
                          <i></i>
                          {{ item.name }}
                        </a>
                      </li>
                      <li v-if="index>=7 && isShowAllProject==true">
                        <a :alt="item.name">
                          <i></i>
                          {{ item.name }}
                        </a>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </div>
            <div class="sl-ext">
              <a-button @click="showAllProject('Project')">
                More
                <a-icon type="down" />
              </a-button>
            </div>
          </div>
          <div class="J_selectorLine s-category">
            <div class="sl-wrap">
              <div class="sl-key">
                <strong>Platform</strong>
              </div>
              <div class="sl-value" v-if="PlatformList.length>0">
                <div class="sl-v-list">
                  <ul class="J_valueList flex">
                    <div
                      v-for="(item, index) in PlatformList"
                      :key="index"
                      @click="addtFiltertype(item,'Platform')"
                    >
                      <li v-if="index<6">
                        <a>
                          <i></i>
                          {{ item.name }}
                        </a>
                      </li>
                      <li v-if="index>=7 && isMorePlatform==true">
                        <a>
                          <i></i>
                          {{ item.name }}
                        </a>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </div>
            <div class="sl-ext">
              <a-button @click="showAllProject('Platform')">
                More
                <a-icon type="down" />
              </a-button>
            </div>
          </div>
          <div class="J_selectorLine s-category">
            <div class="sl-wrap">
              <div class="sl-key">
                <strong>Process/Station</strong>
              </div>
              <div class="sl-value" v-if="ProcessList.length>0">
                <div class="sl-v-list">
                  <ul class="J_valueList flex">
                    <div
                      v-for="(item, index) in ProcessList"
                      :key="index"
                      @click="addtFiltertype(item,'Process')"
                    >
                      <li v-if="index<6">
                        <a>
                          <i></i>
                          {{ item.name }}
                        </a>
                      </li>
                      <li v-if="index>=7 && isMoreProcess==true">
                        <a>
                          <i></i>
                          {{ item.name }}
                        </a>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </div>
            <div class="sl-ext">
              <a-button @click="showAllProject('Process')">
                More
                <a-icon type="down" />
              </a-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 方案列表 -->
      <div class="solutionListBox filter">
        <div class="f-line top flex">
          <div class="f-sort">
            <a @click="SearchAllList('hot')" :class="listSortIndex===0?'curr':''">
              <span class="fs-tit">ActiveValue</span>
              <em class="fs-down">
                <a-icon type="arrow-down" v-if="hotStatus===0" />
                <a-icon type="arrow-up" v-else />
              </em>
            </a>
            <a @click="SearchAllList('time')" :class="listSortIndex===1?'curr':''">
              <span class="fs-tit">Time</span>
              <em class="fs-down">
                <a-icon type="arrow-down" v-if="timeStatus===0" />
                <a-icon type="arrow-up" v-else />
              </em>
            </a>

            <!-- <span class="clr"></span> -->
          </div>
        </div>
        <div id="J_goodsList" class="goods-list-v2 gl-type-2 J-goods-list">
          <ul class="gl-warp clearfix flex jc">
            <li
              class="gl-item"
              v-for="(item, index) in schemeList"
              :key="index"
              @click="toSchemePage(item)"
            >
              <div class="gl-i-wrap">
                <div class="p-img">
                  <a target="_blank">
                    <!-- <img width="220" height="282" v-if="item.SchemeImage.length<=0" src /> -->
                    <a-empty
                      v-if="item.SchemeImage.length<=0"
                      style
                      class="empty"
                      :description="'No pictures'"
                    />
                    <img width="220" height="282" v-else :src=" item.SchemeImage[0] " @error="errorImg" />

                    <!-- <img width="220" height="282" :src="Array.from(item.SchemeImage)[0] " /> -->
                  </a>
                </div>
                <!-- scroll img -->
                <div class="p-scroll scrolled"></div>
                <div class="p-price">
                  <strong class="J_10337645533">
                    <!-- <em>￥</em> -->
                    <i>{{ item.CostofInvestment }}</i>
                  </strong>
                </div>
                <div class="p-name p-name-type-3">
                  <a target="_blank">
                    <em>{{ item.SubAppsSolutions }}</em>
                  </a>
                </div>
                <div class="p-commit">
                  <div class="flex starBox">
                    <strong>
                      <!-- <a>11万+</a>条评价 -->
                      evaluation
                    </strong>
                    <a-rate :default-value="item.Satisfaction" disabled class="star" />
                  </div>
                </div>
                <div class="p-commit">
                  <div>
                    <strong>
                      The current heat
                      <a>{{ item.BrowseTimes }}</a>
                    </strong>
                  </div>
                </div>
                <div class="p-commit">
                  <div>
                    <strong>
                      Upload time
                      <a>{{ item.CreateTime }}</a>
                    </strong>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <!-- 分页 -->
        <div id="components-pagination-demo-mini" class="paginationBox">
          <!-- :total="SolutionTotalCount" -->

          <a-pagination
            :total="totalCount"
            show-size-changer
            show-quick-jumper
            class="pagination"
            v-model="listCurrentPage"
            :page-size.sync="listPageSize"
            @change="paginationChange"
            @showSizeChange="paginationChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/layout/header'

export default {
  name: 'FilterList',
  data() {
    return {
      filterCriteriaList: [], //筛选条件集合
      mProjectList: [],
      isShowAllProject: false,
      isMoreProcess: false,
      isMorePlatform: false,
      goodList: [],
      SolutionTotalCount: 0,
      MotherProjectList: [],
      PlatformList: [],
      ProcessList: [],
      SetFilterList: [], //筛选条件集合
      timeSequence: 0, //0 正序 1 反序
      hotSequence: 0, //热度排序 0 正序 1 反序
      SearchText: '', //搜索框内容
      theModule: '', //当前module
      solutionMapList: [],
      MotherProjectFilterList: [],
      PlatformFilterList: [],
      ProcessFilterList: [],
      solutionMapFilterList: [],
      listPageSize: 20,
      listCurrentPage: 1,
      schemeList: [],
      timeOrder: 'CreateTime',
      hotOrder: 'BrowseTimes',
      orderByList: '',
      initData: [],
      listSortIndex: '',
      timeStatus: 0,
      hotStatus: 0,
      totalCount: 0
    }
  },
  components: {
    Header
  },
  mounted() {
    this.initDefaultData()
  },
  watch: {
    SearchText() {},
    SetFilterList() {
      this.resetFilter()
      this.getSchemeType()
    }
  },
  methods: {
    errorImg(event) {
      this.$pk.errorImg(event)
    },
    initDefaultData() {
      this.initData = sessionStorage.getItem('department')
      this.initData = JSON.parse(this.initData)
      this.solutionMapFilterList = []
      this.MotherProjectFilterList = []
      if (this.initData.SubName) {
        this.SetFilterList.push({
          type: 'MotherProject',
          name: this.initData.SubName
        })
        this.MotherProjectFilterList.push(this.initData.SubName)
      }
      let ModuleName = sessionStorage.getItem('ModuleName')
      if (ModuleName) {
        this.SetFilterList.push({
          type: 'Solution',
          name: ModuleName
        })
        this.solutionMapFilterList.push(ModuleName)
      }
      // console.log('this.initData :>> ', this.initData)
      this.getSchemeType()
      this.getAllSchemeInfo()
    },
    // 重新配置单一筛选条件数组
    resetFilter() {
      this.MotherProjectFilterList = []
      this.PlatformFilterList = []
      this.ProcessFilterList = []
      this.solutionMapFilterList = []
      this.SetFilterList.map(item => {
        if (item.type === 'Solution') {
          this.solutionMapFilterList.push(item.name)
        } else if (item.type === 'MotherProject') {
          this.MotherProjectFilterList.push(item.name)
        } else if (item.type === 'Platform') {
          this.PlatformFilterList.push(item.name)
        } else if (item.type === 'Process') {
          this.ProcessFilterList.push(item.name)
        }
        console.log('this.SetFilterList :>> ', this.SetFilterList)
      })
      this.getAllSchemeInfo()
    },
    // 数组对象去重
    deWeight(arr) {
      for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].name == arr[j].name) {
            arr.splice(j, 1)
            //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
            j--
          }
        }
      }
      return arr
    },

    addtFiltertype(item, type) {
      item.type = type
      this.SetFilterList.push(item)
      this.SetFilterList = this.deWeight(this.SetFilterList)
    },
    getSchemeType() {
      const a = {
        method: 'ShpSchemeType_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {
          MotherProjectList: this.MotherProjectFilterList,
          SolutionMapList: this.solutionMapFilterList,
          PlatformList: this.PlatformFilterList
        }
      }
      this.$post(a).then(res => {
        const data = res.data
        this.MotherProjectList = data.motherProject ? data.motherProject : []
        this.PlatformList = data.platform ? data.platform : []
        this.ProcessList = data.processStation ? data.processStation : []
        this.solutionMapList = data.section ? data.section : []
      })
    },
    getAllSchemeInfo() {
      const a = {
        method: 'Platform_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.listCurrentPage,
        limit: this.listPageSize,
        language: window.language || 1,
        fieldList:
          ' SchemeId,Projectleader,CreateTime,SchemeImage,SubAppsSolutions,Satisfaction,BrowseTimes,CostofInvestment',
        orderByList: this.orderByList,
        datas: {
          SolutionMapList: this.solutionMapFilterList,
          MotherProjectList: this.MotherProjectFilterList,
          PlatformList: this.PlatformFilterList,
          ProcessStationList: this.ProcessFilterList,
          Solution: this.SearchText ? '%' + this.SearchText + '%' : ''
        }
      }
      this.$post(a).then(result => {
        this.$nextTick(() => {
          this.schemeList = result.data
          this.totalCount = result.count
          if (this.schemeList.length <= 0 || !this.schemeList) {
            this.SolutionTotalCount = 0
            return
          }
          this.schemeList.map(item => {
            item.SchemeImage = item.SchemeImage
              ? eval('(' + item.SchemeImage + ')')
              : ''
            item.CreateTime = item.CreateTime
              ? item.CreateTime.replace('T', '').substr(0, 10)
              : ''
            return item
          })

          this.SolutionTotalCount = this.schemeList.length
          this.SolutionTotalCount = result.count
        })
      })
    },
    delFliter(index) {
      this.SetFilterList.splice(index, 1)
    },
    SearchBtn(e) {
      // console.log('e :>> ', e)
      this.SearchText = e
      this.getAllSchemeInfo()
    },
    getSearchInfo(e) {
      // console.log('搜索内容', e)
      if (e) {
        this.SearchText = e[0]
        this.theModule = e[1]
      }
    },
    showAllProject(type) {
      if (type == 'Project') this.isShowAllProject = !this.isShowAllProject
      else if (type == 'Platform') this.isMorePlatform = !this.isMorePlatform
      else if (type == 'Process') this.isMoreProcess = !this.isMoreProcess
    },
    SearchAllList(type) {
      if (type == 'hot') {
        this.listSortIndex = 0
        if (this.hotOrder === 'BrowseTimes') {
          this.hotOrder = 'BrowseTimes desc'
          this.hotStatus = 1
        } else {
          this.hotOrder = 'BrowseTimes'
          this.hotStatus = 0
        }
      }
      if (type == 'time') {
        this.listSortIndex = 1
        if (this.timeOrder === 'CreateTime') {
          this.timeOrder = 'CreateTime desc'
          this.timeStatus = 1
        } else {
          this.timeOrder = 'CreateTime'
          this.timeStatus = 0
        }
      }
      // 排序条件组合
      this.orderByList = this.timeOrder + ',' + this.hotOrder
      // console.log('this.orderByList :>> ', this.orderByList)
      this.getAllSchemeInfo()
    },
    paginationChange(page, pageSize) {
      console.log(page, pageSize)
      this.listCurrentPage = page
      this.listPageSize = pageSize
      this.getAllSchemeInfo()
    },
    toSchemePage(item) {
      console.log('item :>> ', item)
      let data = JSON.stringify(item)
      this.$router.push({ name: 'Scheme', query: { item: data } })
    }
  }
}
</script> 

<style lang="less" scoped>
@import url('css/filterList.less');
.ListContent {
  margin: 0 auto;
  max-width: 1200px;
}
@media screen and (max-width: 1410px) and (min-width: 1230px) {
  .selector .sl-b-letter li {
    padding: 0 7px;
  }
}
</style>